﻿@charset "utf-8";
/* 4eb6ff */

/*========================================
             全局样式设定
=========================================*/
body {margin:0; padding:0; width:100%; overflow-x:hidden; height:100%; overflow-y:auto; font-family:"microsoft yahei"; font-size:12px; background:#fff; color:#666;}
ul,ol,li,dl,dt,dd,form,label,h1,h2,h3,h4,h5,h6,button,input[type="text"],input[type="password"],textarea,select,i {margin:0; padding:0; list-style:none; outline:none; font-family:"microsoft yahei";}
ul, ul li {display:inline-block;}
img {display:block; border:none;}
.bmtrbtm img {display:inline; border:none;}
a {text-decoration:none; color:#666; cursor:pointer;}
a:hover {color:#4eb6ff;}
.ftleft{float:left;}
.ftright{float:right;}
.ftright span{ padding:0px 4px;}
.ftright span.fccc{ color:#ccc;}
.ftright span.toolbar-arrow{ float:right; margin-top:18px;}

.tran03 {-webkit-transition:all .3s; -moz-transition:all .3s; -o-transition:all .3s; transition:all .3s;}
.yun-hide {display: none; margin-left: 58px;}


/*********************************************
	               animation
*********************************************/
.fadein-top,.fadein-bottom,.fadein-left,.fadein-right{-webkit-animation: 1s ease-out backwards;-moz-animation: 1s ease-out backwards;-ms-animation: 1s ease-out backwards;animation: 1s ease-out backwards}
.fadein-top {-webkit-animation-name: fadeintop;-moz-animation-name: fadeintop;-ms-animation-name: fadeintop;animation-name: fadeintop}
@-webkit-keyframes fadeintop { 0% {  opacity: 0;  -webkit-transform: translateY(-50px)  } 100% {  opacity: 1;  -webkit-transform: translateY(0)  } }
@-moz-keyframes fadeintop { 0% {  opacity: 0;  -moz-transform: translateY(-50px)  } 100% {opacity: 1;-moz-transform: translateY(0)}}
@-ms-keyframes fadeintop {0% {opacity: 0;-ms-transform: translateY(-50px)}100% {opacity: 1;-ms-transform: translateY(0)}}
@keyframes fadeintop { 0% {  opacity: 0;  transform: translateY(-50px)  } 100% { opacity: 1;  transform: translateY(0)}}
.fadein-bottom {-webkit-animation-name: fadeinbottom;  -moz-animation-name: fadeinbottom;  -ms-animation-name: fadeinbottom;  animation-name: fadeinbottom  }
@-webkit-keyframes fadeinbottom { 0% {  opacity: 0;  -webkit-transform: translateY(50px)  } 100% {  opacity: 1;  -webkit-transform: translateY(0)  } }
@-moz-keyframes fadeinbottom { 0% {  opacity: 0;  -moz-transform: translateY(50px)  } 100% {  opacity: 1;  -moz-transform: translateY(0)  } }
@-ms-keyframes fadeinbottom {0% {  opacity: 0;  -ms-transform: translateY(50px)  } 100% {  opacity: 1;  -ms-transform: translateY(0)}}
@keyframes fadeinbottom {0% {opacity: 0; transform: translateY(50px)}100% {opacity: 1;transform: translateY(0)}}
.fadein-right {-webkit-animation-name: fadeinright;  -moz-animation-name: fadeinright;  -ms-animation-name: fadeinright;  animation-name: fadeinright  }
@-webkit-keyframes fadeinright { 0% {  opacity: 0;  -webkit-transform: translateX(50px)  } 100% {  opacity: 1;  -webkit-transform: translateX(0)  } }
@-moz-keyframes fadeinright { 0% {  opacity: 0;  -moz-transform: translateX(50px)  } 100% {  opacity: 1;  -moz-transform: translateX(0)  } }
@-ms-keyframes fadeinright { 0% {  opacity: 0;  -ms-transform: translateX(50px)  } 100% {  opacity: 1;  -ms-transform: translateX(0)  } }
@keyframes fadeinright { 0% {  opacity: 0;  transform: translateX(50px)  } 100% {  opacity: 1;  transform: translateX(0)  } }
.fadein-left {  -webkit-animation-name: fadeinleft;  -moz-animation-name: fadeinleft;  -ms-animation-name: fadeinleft;  animation-name: fadeinleft  }
@-webkit-keyframes fadeinleft { 0% {  opacity: 0;  -webkit-transform: translateX(-50px)  } 100% {  opacity: 1;  -webkit-transform: translateX(0)  } }
@-moz-keyframes fadeinleft { 0% {  opacity: 0;  -moz-transform: translateX(-50px)  } 100% {  opacity: 1;  -moz-transform: translateX(0)  } }
@-ms-keyframes fadeinleft { 0% {  opacity: 0;  -ms-transform: translateX(-50px)  } 100% {  opacity: 1;  -ms-transform: translateX(0)  } }
@keyframes fadeinleft {0% {  opacity: 0;  transform: translateX(-50px)  } 100% {  opacity: 1;  transform: translateX(0)  } }


/**按钮**/
.buttonsmall{background-color:#4eb6ff; padding-left:10px; padding-right:10px; border-radius:5px; color:#FFF; font-size:12px; margin-bottom:5px;}
.buttonsmall:hover{color:#FFF;}
.buttoncenter{ height:26px; line-height:26px; background-color:#4eb6ff; padding:5px 10px 5px 10px ; border-radius:5px; color:#FFF; font-size:14px;}
.buttoncenter:hover{color:#FFF;}



/*=============整合营销==============*/
.container{ width: 1200px;margin: auto; }

.plan_yx{ width: 100%; background: url(../images/marketing1-1.jpg) center no-repeat; height: 487px; }
.plan_yx h2{ color: #fff;  font-size: 40px; text-align: center; padding: 80px 0 45px;}
.plan_yx dd{background: url(../images/marketing1-2.png) center no-repeat; height: 223px; width: 100%;}

.question h2{ color: #454545; text-align: center; padding: 60px 0 ; font-size: 40px; }
.question .claim{ padding-bottom: 40px;  width: 100%; display: inline-block;}
.question .claim dd{background: url(../images/marketing2-1.jpg) center no-repeat; width: 472px; height: 316px; float: left; margin-right: 40px; }
.question .claim p{ font-size: 16px; line-height: 2; color: #727272; }
.question .claim p span{ color: #f00; }
.question .claim .claimtxt{ margin-top: 25px; }

.orange_yx{ width: 100%; display: inline-block; background: #f8e288; }
.orange_yx h2{ color: #333;  text-align: center; padding: 60px 0 ; font-size: 40px; }
.orange_yx .question_yx{ position: relative; width: 573px; height: 376px; background: url(../images/marketing3-1.png) center no-repeat; margin: 0 auto 40px; }
.orange_yx .question_yx .questiontxt{ position: absolute;  width: 300px; }
.orange_yx .question_yx .questiontxt p{ color: #666; font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.orange_yx .question_yx .questiontxt span{ color: #666; font-size: 14px; }
.orange_yx .question_yx .questiontxt1{text-align: right; left: -325px; top: 20px;}
.orange_yx .question_yx .questiontxt2{text-align: right; left: -325px; bottom: 70px;}
.orange_yx .question_yx .questiontxt3{ text-align: left; right: -325px;  top: 20px; }
.orange_yx .question_yx .questiontxt4{ text-align: left; right: -260px; bottom: 40px; }

.service_yx{ padding-bottom: 60px; }
.service_yx h2{ color: #454545;  text-align: center; padding: 60px 0 ; font-size: 40px; }
.service_yx ul{ width: 100%; padding-bottom: 55px; }
.service_yx ul li{ float: left; width: 220px; margin-left: 15px;  height: 240px;}
.service_yx ul li:first-child{ margin-left: 0px; }
.service_yx ul li dd{ width: 100%; height: 130px; margin-top: 20px; }
.service_yx ul li.service1{ background: #f8867c; }
.service_yx ul li.service2{ background: #83b17d; }
.service_yx ul li.service3{ background: #51b1d5; }
.service_yx ul li.service4{ background: #7878ee; }
.service_yx ul li.service5{ background: #c27be0; }
.service_yx ul li.service1 dd{ background: url(../images/marketing4-1.png) center no-repeat; }
.service_yx ul li.service2 dd{ background: url(../images/marketing4-2.png) center no-repeat; }
.service_yx ul li.service3 dd{ background: url(../images/marketing4-3.png) center no-repeat; }
.service_yx ul li.service4 dd{ background: url(../images/marketing4-4.png) center no-repeat; }
.service_yx ul li.service5 dd{ background: url(../images/marketing4-5.png) center no-repeat; }
.service_yx ul li p{ text-align: center; font-size: 22px; color: #fff; margin: 10px 0 0; }
.service_yx h3{ color: #f63f27; font-size: 30px; text-align: center; font-weight: normal; padding-bottom: 10px; }
.service_yx .slogan{ font-size: 18px; color: #666; text-align: center; line-height: 35px; }
.service_yx h4{ text-align: center; color: #0b3cb7; font-size: 18px; font-weight: normal;}


.ashes_yx{ display: inline-block; background: #f7f7f7; width: 100%; padding-bottom: 60px; }
.ashes_yx h2{color: #454545;  text-align: center; padding: 60px 0 ; font-size: 40px; }
.ashes_yx ul{padding-bottom: 30px; width: 100%;}
.ashes_yx ul li{ float: left; width: 20%; text-align: center; }
.ashes_yx ul li p{ color: #333; font-size: 14px; margin-top: 10px; }
.ashes_yx ul li dd{ width: 120px; height: 120px;  display: block; margin: auto;border-radius: 120px;-webkit-border-radius: 120px;}
.ashes_yx ul .ashes_yx1 dd{ background:url(../images/marketing5-1.png) center no-repeat #fbb76e; }
.ashes_yx ul .ashes_yx2 dd{ background:url(../images/marketing5-2.png) center no-repeat #f07272; }
.ashes_yx ul .ashes_yx3 dd{ background:url(../images/marketing5-3.png) center no-repeat #ce73c9; }
.ashes_yx ul .ashes_yx4 dd{ background:url(../images/marketing5-4.png) center no-repeat #9b59ff; }
.ashes_yx ul .ashes_yx5 dd{ background:url(../images/marketing5-5.png) center no-repeat #6d7efd; }
.ashes_yx .flow{background:url(../images/marketing5-6.png) center no-repeat; width: 100%; height: 318px;}

.designation{ padding-bottom: 60px; }
.designation h2{color: #454545;  text-align: center; padding: 60px 0 ; font-size: 40px; }
.designation ul {margin: 20px auto 100px;}
.designation ul li{ width: 370px; margin-left: 45px;  float: left;}
.designation ul li:first-child{ margin-left: 0px; }
.designation ul li span{ width: 100%; text-align: center; font-size: 14px; color: #666;  display: block; line-height: 24px;}
.designation ul li .block_yx{ width: 370px; height: 150px;  text-align: center; margin-bottom: 20px;}
.designation ul li .block_yx.block_yx1{ background: url(../images/marketing6-1.jpg) center no-repeat; }
.designation ul li .block_yx.block_yx2{ background: url(../images/marketing6-2.jpg) center no-repeat; }
.designation ul li .block_yx.block_yx3{ background: url(../images/marketing6-3.jpg) center no-repeat; }
.designation ul li .block_yx p{ font-size: 36px; color: #fff; font-weight: bold; margin: 0; padding-top: 35px; }
.designation ul li .block_yx span{ font-size: 30px; color: #fff; margin-top: 5px; }


.showcasing{ display: inline-block; width: 100%; height:694px; background: url(../images/marketing7-1.jpg) center no-repeat; }
.showcasing h2{color: #fff;  text-align: center; padding: 60px 0 ; font-size: 40px; }
.showcasing .plate_yx{ width: 100%; height: 130px; }
.showcasing .plate_yx li{ width: 33.3333333%; float: left; height: 130px; color: #fff; }
.showcasing .plate_yx li.plate1{ background: #31c5ef; }
.showcasing .plate_yx li.plate2{ background: #a85ad4; }
.showcasing .plate_yx li.plate3{ background: #28d1cb; }
.showcasing .plate_yx li dd{ height: 130px; width: 130px; margin-right: 20px; float: left; }
.showcasing .plate_yx li.plate1 dd{ background: url(../images/marketing7-2.png) center right no-repeat; }
.showcasing .plate_yx li.plate2 dd{ background: url(../images/marketing7-3.png) center right no-repeat; }
.showcasing .plate_yx li.plate3 dd{ background: url(../images/marketing7-4.png) center right no-repeat; }
.showcasing .plate_yx li p{ font-size: 20px; font-weight: bold; margin: 25px 0 0; }
.showcasing .plate_yx li p i{ font-size:38px; font-style: normal; font-weight: bold;  }
.showcasing .plate_yx li span{ font-size: 16px; }

.box{ width: 1020px; height: 290px;position: relative;display: block;  margin: 45px auto; }
.box ul{ width: 200%; }
.box ul li{ width: 320px; height: 290px;  background: #f4f4f4; margin: 0 10px; float: left;}
.box ul li img{ width: 320px; height: 180px; }
.box ul li p{ color: #428bca; padding: 0 10px; font-size: 14px; }
.box ul li a:hover p{ color: #2a6496; }
.box ul li span{ padding: 0 10px; display: block; line-height: 22px; color: #8a8a8a; height: 46px; overflow: hidden; }
.box .prev{ position: absolute; width: 50px; height: 70px; cursor:pointer; background:  url(../images/marketing7-6.png) center  no-repeat; right: -85px; top: 120px;}
.box .next{ position: absolute; width: 50px; height: 70px; cursor:pointer; background:  url(../images/marketing7-5.png) center  no-repeat; left: -85px; top: 120px;}
.box .prev:hover,.box .next:hover{ background-color: rgba(0, 0, 0, 0.28); }

.step_yx{ width: 100%; background: url(../images/marketing8-1.png) center  no-repeat; height: 182px;  }